<!--
 Copyright 2013 The Polymer Authors. All rights reserved.
 Use of this source code is governed by a BSD-style
 license that can be found in the LICENSE file.
-->
<!--
/**
 * @module Polymer Elements
 */
/**
 * g-ribbon is a g-selector styled to look like a sidebar menu.
 * Use it in conjunction with g-menu-item.
 *
 * Example:
 *
 *     <g-ribbon selected="0" label="Google">
 *       <g-menu-item src="home.png">Home</g-menu-item>
 *       <g-menu-item src="topics.png">Topics</g-menu-item>
 *       <g-menu-item src="accounts.png">Accounts</g-menu-item>
 *       <g-menu-item src="explore.png">Explore</g-menu-item>
 *     </g-ribbon>
 *
 * @class g-ribbon
 * @extends g-selector
 */
-->
<link rel="import" href="g-selector.html"/>
<polymer-element name="g-ribbon" extends="g-selector" attributes="label">
  <template>
    <style>
      @host {
        * {
          display: -webkit-box;
          display: -webkit-flex;
          display: flex;
          -webkit-box-orient: vertical;
          -webkit-flex-flow: column;
          flex-direction: column;
          background: -webkit-linear-gradient(-60deg, #3d3d3d, #353535);
          background: -moz-linear-gradient(-60deg, #3d3d3d, #353535);
          background: linear-gradient(-60deg, #3d3d3d, #353535);
          box-shadow: inset -5px 0px 8px rgba(0, 0, 0, 0.4);
          color: white;
          font-size: 15px;
        }
      }
      
      .ribbon-label {
        height: 60px;
        line-height: 60px;
        padding-left: 30px;
        font-size: 21px;
        color: white;
        border-bottom: 1px solid rgba(0, 0, 0, 0.2);
        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.02);
        cursor: pointer;
      }
       
      .menu {
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        flex: 1;
        overflow: auto;
      }
      
      /*@polyfill g-menu-item */
      shadow::-webkit-distributed(g-menu-item) {
        display: block;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        padding: 12px 14px;
        margin: 10px 14px;
        border: 1px solid transparent;
        border-radius: 3px;
        opacity: 0.7;
        cursor: pointer;
        -webkit-user-select: none;
      }
      
      /*@polyfill g-menu-item.selected */
      shadow::-webkit-distributed(g-menu-item.selected) {
        background-color: rgba(0,0,0,0.5);
        border: 1px solid #3D3D3D;
        opacity: 1;
      }
      
      /*@polyfill g-menu-item.selected:before */
      shadow::-webkit-distributed(g-menu-item.selected:before) {
        content: "";
        position: absolute;
        margin-top: 6px;
        right: 0;
        width: 0; 
        height: 0; 
        border-top: 10px solid transparent;
        border-bottom: 10px solid transparent; 
        border-right: 10px solid white; 
      }
    </style>
    <div class="ribbon-label">{{label}}</div>
    <div class="menu">
      <shadow></shadow>
    </div>
  </template>
  <script>
    Polymer('g-ribbon', {
      /**
       * Label to put on the top portion of ribbon.
       *
       * @attribute label
       * @type string
       * @default ''
       */
      label: ''
    });
  </script>
</polymer-element>
